<template>
  <page-loading :show="pageLoading">
    <view class="wrap">
      <car-info-header :carInfo="carInfo"></car-info-header>
      <view class="tips">选择已有订单或新创建订单</view>
      <view class="order-list" v-if="list.length">
        <radio-group @change="selOrder">
          <view class="order" v-for="(item, i) in list" :key="i">
            <view class="title flex flex-ai-c">
              <image
                :src="item.createUserHead"
                mode="aspectFit"
                class="head-img"
              />
              <view class="name flex-1">{{ item.createUserName }}</view>
              <view class="state">{{ item.orderStatusStr }}</view>
            </view>
            <label class="body flex flex-ai-c">
              <view class="info flex-1">
                <view class="info-item flex flex-ai-c">
                  <view class="item-left">订单号：</view>
                  <view class="item-right">{{ item.orderNo }}</view>
                </view>
                <view class="info-item flex flex-ai-c">
                  <view class="item-left">订单项目：</view>
                  <view class="item-right">
                    {{ item.orderProductsNameStr }}
                  </view>
                </view>
                <view class="info-item flex flex-ai-c">
                  <view class="item-left">下单时间：</view>
                  <view class="item-right">{{ item.orderAddTime }}</view>
                </view>
              </view>
              <view>
                <radio
                  :value="item.orderId"
                  style="transform: scale(0.8)"
                  color="#FDD421"
                />
              </view>
            </label>
            <view class="total">
              <text class="color-999 pr-40"
                >共{{ item.orderProductsCount }}件商品，{{
                  item.orderServiceCount
                }}项服务</text
              >
              <text class="color-999">实付：</text>
              <text class="color-333">￥{{ item.orderAllMoney }}</text>
            </view>
          </view>
        </radio-group>
      </view>
      <defaultImg :show="showDefault" msg="暂无订单，请新建订单"></defaultImg>
      <view class="btn">
        <button class="btn-primary" @click="next">新建订单</button>
      </view>
    </view></page-loading
  >
</template>
<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader.vue'
import defaultImg from '../../components/defaultImg/defaultImg'
export default {
  data() {
    return {
      id: '',
      exceptionId: '', //异常项id
      list: [],
      showDefault: false, //缺省
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },
  },

  onLoad(e) {
    this.id = e.id
    this.exceptionId = e.exceptionId
  },

  onShow() {
    this.getList()
  },

  onBackPress(e) {
    // 清空已选异常列表
    this.$store.commit('afterSales/setOrderErrList', [])
    return false
  },

  methods: {
    //订单列表
    getList() {
      if (this.pageLoading) {
        uni.showLoading({
          title: '加载中',
        })
      }

      this.$api.afterSales
        .getArrivalOrderList({
          arriveId: this.id,
        })
        .then((res) => {
          if (res.data.length) {
            this.list = res.data.map((item) => {
              let orderProductsNameStr = item.orderProductsName[0]
              for (let i = 1; i < item.orderProductsName.length; i++) {
                orderProductsNameStr += '，' + item.orderProductsName[i]
              }
              item.orderProductsNameStr = orderProductsNameStr
              return item
            })
            this.showDefault = false
          } else {
            this.showDefault = true
          }
          if (this.pageLoading) {
            uni.hideLoading()
          } else {
            this.pageLoading = true
          }
        })
        .catch((e) => {
          this.showDefault = true
          if (this.pageLoading) {
            uni.hideLoading()
          } else {
            this.pageLoading = true
          }
        })
    },

    //选择订单
    selOrder(e) {
      this.$api.afterSales
        .relationOrderException({
          exceptionId: this.exceptionId,
          orderId: e.detail.value,
        })
        .then((res) => {
          console.log(res)
          uni.$emit('selOrderSuccess')
          uni.showToast({
            title: '关联成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((err) => {
          this.getList()
        })
    },
    //新建订单
    next() {
      uni.navigateTo({
        url: '/pages_afterSales/createMaintenanceOrder/createMaintenanceOrder',
      })
    },
  },

  components: {
    carInfoHeader,
    defaultImg,
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  background: #f6f6f6;
  min-height: 100vh;

  .tips {
    height: 80rpx;
    line-height: 80rpx;
    margin: 0 24rpx;
    color: #666;
    font-size: 24rpx;

    font-weight: 500;
  }

  .order-list {
    margin: 0 24rpx;
    padding-bottom: 120rpx;

    .order {
      background: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;

      .title {
        height: 70rpx;
        border-bottom: 2rpx solid #eee;
        padding: 0 20rpx;
        .head-img {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 20rpx;
          background: #eee;
        }
        .name {
          font-size: 30rpx;
          font-weight: bold;
          color: #333333;
        }
        .state {
          font-size: 26rpx;
          font-weight: 500;
          color: #eb5c02;
        }
      }

      .body {
        padding: 10rpx 20rpx;
        .info {
          .info-item {
            height: 53rpx;

            .item-left {
              width: 130rpx;
              font-size: 26rpx;
              font-weight: 500;
              color: #999999;
            }

            .item-right {
              width: 470rpx;
              font-size: 26rpx;
              font-weight: 500;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }

      .total {
        height: 80rpx;
        line-height: 80rpx;
        margin: 0 20rpx;
        border-top: 2rpx solid #eee;
        font-size: 26rpx;
        font-weight: 500;
        .pr-40 {
          padding-right: 40rpx;
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 24rpx;
    background: #fff;

    .btn-primary {
      height: 88rpx;
      line-height: 88rpx;
      width: 100%;
    }
  }
}
/deep/ uni-button:after {
  border: none;
}

/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
  color: #333;
}

/deep/ uni-radio .uni-radio-input {
  border-color: #999;
}
</style>
